<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2021-03-24</title>

    <!-- 外部样式-网络资源 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <!-- 外部样式-本地资源 -->
    <link rel="stylesheet" href="./test.css">

    <!-- 内部样式 -->
    <style type="text/css">
        /* 标签 */
        p {
            background-color: #eee;
            padding: 8px;
            margin: 10px 0;
            border-radius: 4px;
        }

        /* ID */
        #a {
            color: #eb4d4b;
        }

        /* CLASS */
        .sea {
            background-color: lightseagreen;
            color: #fff;
        }

        /* 后代选择器 */
        div p {
            background-color: #10ac84;
            color: #fff;
        }

        /* 交集 */
        p.text {
            background-color: #74b9ff;
            color: #fff;
        }

        /* 并集 */
        .a,
        .b,
        .c {
            background-color: #fd79a8;
            color: #fff;
        }

        /* 文本格式 */
        .content {
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 14px;
        }

        .content a {
            color: #0984e3;
        }

        .content-hover:hover {
            color: #0984e3;
            font-weight: 700;
            box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
            transform: scale(1.05);
            transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
        }

        .italic {
            font-style: italic;
        }

        .bold {
            font-weight: 700;
        }

        .text-xcenter {
            text-align: center;
        }

        .text-ycenter {
            padding: 0 0 0 20px;
            height: 60px;
            line-height: 60px;
        }

        .text-through {
            text-decoration: line-through;
        }

        .text-unerline {
            text-decoration: underline;
        }

        .icon-heart {
            color: #ff4757;
        }
    </style>
</head>
<body>
    <h1 class="text-4xl my-7 text-center text-red-400">Learn CSS! 🧁</h1>


    <main class="w-96 my-0 mx-auto p-10 border rounded shadow-sm">



        <!-- 行内样式 -->
        <p style="color: #0984e3;">行内样式</p>

        <!-- 选择器 -->
        <p>标签选择器</p>
        <p id="a">ID 选择器</p>
        <p class="sea">CLASS 选择器 - 文本文本文本</p>
        <p class="sea">CLASS 选择器 - 文本文本文本</p>

        <div>
            <p>后代选择器</p>
        </div>

        <p class="text">交集</p>
        <p class="text">交集</p>
        <p class="text2">交集</p>

        <p class="a">并集</p>
        <p class="b">并集</p>
        <p class="c">并集</p>

        <!-- 文本样式 -->
        <p class="content">
            Lorem <span class="italic">ipsum</span> dolor, sit amet consectetur adipisicing <span
                class="text-unerline">elit</span>. Ipsum ad a modi sunt
            provident
            nostrum <span class="bold">sapiente</span>
            expedita <span class="text-through">at quibusdam </span>corrupti eveniet quia saepe, rem molestias totam ut
            beatae
            <a href="#">blanditiis</a> amet.
        </p>

        <p class="text-xcenter">文本对齐方式-水平居中</p>
        <p class="text-ycenter">文本对齐方式-垂直居中</p>

        <p class="content-hover text-xcenter">Hover me!</p>

        <p class="text-xcenter"><i class="fa fa-heart icon-heart"></i> Font awesome!</p>
    </main>

    <a href="https://gitee.com/guangzan/front-end-training/blob/master/2021-03-24/note.html" target="_blank">
        <button
            class="block mx-auto my-6  w-full sm:w-auto flex-none bg-gray-900 hover:bg-gray-700 text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200">查看源代码</button>
    </a>
</body>
</html>
